<template>
	<view class="pageContent">
		<view class="siteTop">
			小区-楼栋-点位
		</view>
		<view class="remoteMain" @click="doorListCli(index)" v-for="(item,index) in doorList" :key="index">
			<image class="remoteBac" v-show="doorIndex==index" :src="images +'/selectGate.png'" />
			<view class="remoteGate">{{item.installationName || '悦江苑'}}-{{item.gatePostName}}</view>
			<view class="remoteBind" v-if="item.existEquipment==1">已有绑定设备</view>
			<image class="remoteSel" v-if="doorIndex==index" :src="localImages +'/doorSelect.png'" />
		</view>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				title: '123',
				doorList: '',
				doorIndex: -1,
			}
		},
		onLoad() {
			this.taskTypeList()
		},
		methods: {
			async taskTypeList() {
				var url = '/UserServer/mini/install/watingInstallList'
				var options = {
					url
				}
				var param = await util.requestPro(options)
				// console.log('taskTypeList',param)
				this.doorList = param
			},
			doorListCli(id) {
				this.doorIndex = id
				getApp().globalData.installSite = this.doorList[id]
				wx.navigateBack()

			},

		},

	}
</script>

<style>
	.pageContent {
		display: flex;
		flex-direction: column;
		padding: 112rpx 0rpx 0rpx 0rpx;
	}

	.siteTop {
		position: fixed;
		top: 0;
		left: 0;
		font-weight: 600;
		width: 100%;
		font-size: 30rpx;
		background: #FFFFFF;
		line-height: 90rpx;
		padding: 0rpx 0rpx 0rpx 60rpx;
	}


	.remoteMain {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
		/* width: 100%; */
		height: 120rpx;
		border-radius: 20rpx;
		padding: 0rpx 20rpx 0rpx 30rpx;
		margin: 0rpx 30rpx 0rpx 30rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
		z-index: 0;
		/* border 1px solid #666 */
	}

	.remoteBac {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0rpx;
		left: 0rpx;
		z-index: -1;
	}
	
	.remoteBind{
		text-align: right;
		color: #FA6400;
	}

	.remoteIco {
		position: absolute;
		top: 50%;
		left: 40rpx;
		margin-top: -25rpx;
		width: 56rpx;
		height: 46rpx;
		background: #84D7FF;
	}

	.remoteSel {
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
		width: 56rpx;
		height: 46rpx;
	}


	.loginMBt {
		width: 70%;
		margin: 50rpx 0rpx 0rpx 0rpx;
	}
</style>
